<template>
	<div>
		<!-- 精选专栏字体 -->
		<div class="swiper">
			<div class="allkan" @click="goto">精选专栏 ></div>
		</div>

			<div class="swiperconter">
				<div v-for="(item, index) in newsList" :key="index" class="swiperconters">
					<img :src="item.pic">
					<span>{{item.title}}</span>
					<p class="descript">{{item.descript}}</p>
				</div>
			</div>
		</div>
</template>

<script>
	export default {
		props:{
			newsList : Array
		},
		methods:{
			goto(){
				this.$router.push({
					path:'Zhuaninner'
				})
			}
		}
	}
</script>

<style scoped>
	.allkan {
		width: 100%;
		height: 4.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.swiperconter {
	  width: 100%;
	  height: 270px;
	  /* border: 1px solid red; */
	  overflow: scroll;
	  display: flex;
	}
	
	.swiperconters{
	  width: 350px;
	  height: 210px;
	  /* background-color: hotpink; */
	  margin-top: -15px;
	  font-size: 0.6rem;
	  margin-left: 10px;
	  /* border-radius: 10px; */
	}
	
	.swiperconters img{
	  width: 350px;
	  height: 100%;
	  /* border-radius:10px; */
	}
	
	.descript{
	  display: -webkit-box;
	  overflow: hidden;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 1;
	  font-size: 14px;
	  color: gray;
	}
	
	.swiper {
	  margin-top: 280px;
	}
	
	.jingxuanzhuan {
	  font-size: 0.6rem;
	  width: 100%;
	  height: 50px;
	  text-align: center;
	  line-height: 50px;
	}
</style>
